<template>
  <div class="post-view-container">
    <div class="page-header">
      <h2>我的帖子</h2>
      <el-button type="primary" class="new-post-btn">
        <el-icon><Plus /></el-icon>发布新帖
      </el-button>
    </div>

    <el-collapse v-model="activeName" accordion class="custom-collapse">
      <!-- 使用 index 来显示顺序编号 -->
      <el-collapse-item v-for="(post, index) in posts" :key="index + 1" :name="index + 1" class="post-item">
        <template #title>
          <div class="post-title">
            <!-- 顺序编号和图片 -->
            <div class="title-left">
              <div class="post-index">{{ index + 1 }}</div>
              <div class="post-image-container">
                <img :src="post.imagePath" alt="帖子图片" class="title-image" />
              </div>
              <div class="post-brief">
                <div class="post-brief-title">{{ post.title }}</div>
                <div class="post-brief-info">
                  <span class="post-author">{{ post.author }}</span>
                  <span class="post-date">{{ formatDate(post.publishDate).split(' ')[0] }}</span>
                </div>
              </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="title-right">
              <el-tag :type="getTagType(post.state)" class="state-tag" effect="dark">{{ post.state }}</el-tag>

              <!-- 点赞、浏览、分享、收藏、评论 -->
              <div class="post-stats">
                <div class="stat-item">
                  <el-icon><ThumbUp /></el-icon>
                  <span>{{ post.likes }}</span>
                </div>
                <div class="stat-item">
                  <el-icon><View /></el-icon>
                  <span>{{ post.views }}</span>
                </div>
                <div class="stat-item">
                  <el-icon><Share /></el-icon>
                  <span>{{ post.shares }}</span>
                </div>
                <div class="stat-item">
                  <el-icon><Star /></el-icon>
                  <span>{{ post.favorites }}</span>
                </div>
                <div class="stat-item">
                  <el-icon><Message /></el-icon>
                  <span>{{ post.comments }}</span>
                </div>
              </div>

              <!-- 操作按钮组 -->
              <div class="post-actions">
                <!-- 编辑按钮 -->
                <el-button type="primary" size="small" @click.stop="editPost(post.id)" class="action-btn">
                  <el-icon><Edit /></el-icon>
                  <span>查看</span>
                </el-button>
                <!-- 分享按钮 -->
                <el-button type="info" size="small" @click.stop="sharePost(post.id)" class="action-btn">
                  <el-icon><Share /></el-icon>
                  <span>分享</span>
                </el-button>
                <!-- 删除按钮 -->
                <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#F56C6C"
                    title="确定要删除此帖子吗?"
                    @confirm="confirmDelete(post.id)"
                    @cancel="cancelDelete"
                    width="220px"
                >
                  <template #reference>
                    <el-button type="danger" size="small" @click.stop class="action-btn">
                      <el-icon><Delete /></el-icon>
                      <span>删除</span>
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </template>

        <!-- 显示帖子和游记的详细信息 -->
        <div class="post-detail">
          <el-descriptions title="帖子详情" :column="2" border size="large" class="custom-descriptions">
            <el-descriptions-item label="标题">{{ post.title }}</el-descriptions-item>
            <el-descriptions-item label="作者">{{ post.author }}</el-descriptions-item>
            <el-descriptions-item label="发布日期">{{ formatDate(post.publishDate) }}</el-descriptions-item>

            <!-- 直接展示图片 -->
            <el-descriptions-item label="图片">
              <div class="post-detail-image">
                <img :src="post.imagePath" alt="帖子图片">
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ formatDate(post.updateTime) }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getTagType(post.state)" effect="plain">{{ post.state }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="内容" :span="2">
              <div class="post-content">{{ post.content }}</div>
            </el-descriptions-item>
          </el-descriptions>

          <div class="post-detail-actions">
            <el-button type="primary" @click="editPost(post.id)">
              <el-icon><Edit /></el-icon>编辑帖子
            </el-button>
            <el-button type="danger" @click="confirmDelete(post.id)">
              <el-icon><Delete /></el-icon>删除帖子
            </el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 可以添加分页组件 -->
    <div class="pagination-container">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="50"
          :page-size="10"
          :current-page="1"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  InfoFilled,
  Edit,
  Delete,
  ThumbUp,
  ThumbUpFilled,
  View,
  Share,
  Star,
  Message,
  Plus
} from '@element-plus/icons-vue';

export default {
  name: "PostView",
  setup() {
    const router = useRouter();
    const activeName = ref(0); // 默认不展开任何项

    const posts = ref([
      {
        id: 1,
        title: '游记：春游南山',
        author: '小明',
        publishDate: '2025-03-01T10:00:00',
        content: '这是一次难忘的春游，景色美不胜收...',
        imagePath: '/favicon.ico',
        state: '已审核',
        likes: 120,
        views: 1500,
        shares: 75,
        favorites: 200,
        comments: 35,
        updateTime: '2025-03-03T12:30:00',
      },
      {
        id: 2,
        title: '帖子：海边度假',
        author: '小红',
        publishDate: '2025-03-02T11:15:00',
        content: '海风拂面，白沙滩上的脚印还未被海浪抹去...',
        imagePath: '/favicon.ico',
        state: '待审核',
        likes: 80,
        views: 1200,
        shares: 50,
        favorites: 100,
        comments: 10,
        updateTime: '2025-03-04T09:20:00',
      },
      {
        id: 3,
        title: '游记：秋游北京',
        author: '小李',
        publishDate: '2025-03-03T12:00:00',
        content: '秋天的北京充满了浓浓的历史氛围...',
        imagePath: '/favicon.ico',
        state: '已拒绝',
        likes: 200,
        views: 3000,
        shares: 150,
        favorites: 250,
        comments: 50,
        updateTime: '2025-03-05T14:40:00',
      },
    ]);

    const getTagType = (state) => {
      if (state === '已审核') {
        return 'success'; // 绿色
      } else if (state === '已拒绝') {
        return 'danger'; // 红色
      } else {
        return 'warning'; // 修改为警告色
      }
    };

    // 格式化日期方法
    const formatDate = (dateStr) => {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // 分享帖子
    const sharePost = (id) => {
      console.log('分享帖子 ID:', id);
      // 实现分享功能
    };

    // 编辑帖子
    const editPost = (id) => {
      console.log('编辑帖子 ID:', id);
      router.push({
        path: '/travelBlogPage',
        query: { id: id }
      });
    };

    // 确认删除
    const confirmDelete = (id) => {
      console.log('确认删除帖子 ID:', id);
      // 这里可以调用删除接口进行处理
    };

    // 取消删除
    const cancelDelete = () => {
      console.log('取消删除操作');
    };

    return {
      activeName,
      posts,
      getTagType,
      formatDate,
      sharePost,
      editPost,
      confirmDelete,
      cancelDelete,
      // 图标
      InfoFilled,
      Edit,
      Delete,
      ThumbUp,
      View,
      Share,
      Star,
      Message,
      Plus
    };
  },
};
</script>

<style scoped>
.post-view-container {
  padding: 20px;
  border-radius: 8px;
  background: #fff;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.new-post-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-collapse {
  border: none;
  border-radius: 8px;
}

.post-item {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebeef5;
}

.post-item :deep(.el-collapse-item__header) {
  background-color: #f9fafc;
  padding: 12px 20px;
  height: auto;
  min-height: 80px;
}

.post-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.post-index {
  width: 24px;
  height: 24px;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}

.post-image-container {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  flex-shrink: 0;
}

.title-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-brief {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.post-brief-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-brief-info {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #909399;
}

.post-author {
  color: #606266;
}

.title-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.state-tag {
  margin: 0;
  font-size: 12px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}

.post-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f5f7fa;
  padding: 4px 12px;
  border-radius: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.stat-item .el-icon {
  font-size: 14px;
  color: #909399;
}

.post-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 6px 10px;
}

.action-btn .el-icon {
  margin-right: 4px;
}

.post-detail {
  padding: 20px;
  background-color: #fff;
}

.custom-descriptions {
  margin-bottom: 20px;
}

.custom-descriptions :deep(.el-descriptions__header) {
  margin-bottom: 16px;
}

.custom-descriptions :deep(.el-descriptions__label) {
  width: 100px;
  color: #606266;
  background-color: #f5f7fa;
}

.post-detail-image {
  width: 150px;
  height: auto;
  max-height: 150px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.post-detail-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.post-content {
  line-height: 1.6;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.post-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 媒体查询 - 手机端适配 */
@media (max-width: 768px) {
  .post-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .title-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .post-stats {
    order: 1;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
  }

  .post-actions {
    order: 2;
    width: 100%;
    margin-top: 10px;
    justify-content: space-between;
  }

  .custom-descriptions :deep(.el-descriptions-item__container) {
    flex-direction: column;
  }

  .custom-descriptions :deep(.el-descriptions-item__label) {
    width: 100%;
  }
}
</style>